<template>
  <div class="search-box">
    <!-- 导航栏 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索框 -->
    <van-search
      shape="round"
      v-model="shValue"
      show-action
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div class="history-box">
      <van-cell-group>
        <van-cell title="历史记录" />
        <van-cell
          v-for="(item, index) in historyList"
          :key="index"
          :title="item"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { saveSearch, getSearch } from "../../utils/storage";
export default {
  data() {
    return {
      shValue: "",
      shResult: {},
      historyList: getSearch() || [],
    };
  },
  methods: {
    async onSearch() {
      // 把搜索数据存储到本地存起来
      this.historyList.push(this.shValue);
      saveSearch(this.historyList);
      // 携带搜索key跳转页面
      this.$router.push({
        name: "searchrs",
        query: {
          key: this.shValue,
        },
      });
    },
  },
};
</script>

<style>
</style>